<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="https://cdn.tailwindcss.com"></script>
    </head>
    <body>
        <section class="m-3 p-5 border-2 border-black-500">
            <h1 class="text-lg text-red-500 font-bold">宽度</h1>
            <div class="bg-black text-white my-2 w-10">w-10</div>
            <div class="bg-black text-white my-2 w-12">w-12</div>
            <div class="bg-black text-white my-2 w-auto">w-auto</div>
        </section>

        <section class="m-3 p-5 border-2 border-black-500">
            <h1 class="text-lg text-red-500 font-bold">百分百宽度</h1>
            <div class="bg-green-500 text-white my-2 w-1/2">w-1/2</div>
            <div class="bg-green-500 text-white my-2 w-1/3">w-1/3</div>
            <div class="bg-green-500 text-white my-2 w-2/3">w-2/3</div>
            <div class="bg-green-500 text-white my-2 w-1/4">w-1/4</div>
            <div class="bg-green-500 text-white my-2 w-2/4">w-2/4</div>
            <div class="bg-green-500 text-white my-2 w-3/4">w-3/4</div>
            <div class="bg-green-500 text-white my-2 w-1/5">w-1/5</div>
            <div class="bg-green-500 text-white my-2 w-auto">w-auto</div>
        </section>

        <section class="m-3 p-5 border-2 border-black-500">
            <h1 class="text-lg text-red-500 font-bold">视口宽度</h1>
            <div class="bg-purple-500 text-white my-2 w-screen">
                w-screen 100vw
            </div>
            <div class="bg-zinc-500 text-white my-2 w-full">w-full</div>
        </section>

        <section class="m-3 p-5 border-2 border-black-500">
            <h1 class="text-lg text-red-500 font-bold">内容宽度</h1>
            <div class="bg-emerald-500 text-white my-2 w-min">w-min</div>
            <div class="bg-emerald-500 text-white my-2 w-max">w-max</div>
        </section>

        <section class="m-3 p-5 border-2 border-black-500">
            <h1 class="text-lg text-red-500 font-bold">自定义宽度</h1>
            <div class="bg-emerald-500 text-white my-2 w-[200px]">
                自定义400px
            </div>
        </section>

        <section class="m-3 p-5 border-2 border-black-500">
            <h1 class="text-lg text-red-500 font-bold">Max Width宽度</h1>
            <div class="bg-gray-100 max-w-lg mx-auto">
                Lorem ipsum dolor, sit amet consectetur adipisicing elit.
                Laborum perferendis incidunt nihil ullam repellendus praesentium
                consectetur et sed distinctio, magni iusto quos repellat
                officiis cum dolore aliquid minus esse pariatur.
            </div>
        </section>

        <section class="m-3 p-5 border-2 border-black-500">
            <h1 class="text-lg text-red-500 font-bold">高度</h1>
            <section class="flex items-end">
                <div class="bg-orange-500 w-10 mr-2 h-24">h-24</div>
                <div class="bg-orange-500 w-10 mr-2 h-32">h-32</div>
                <div class="bg-orange-500 w-10 mr-2 h-40">h-40</div>
                <div class="bg-orange-500 w-10 mr-2 h-48">h-48</div>
                <div class="bg-orange-500 w-10 mr-2 h-64">h-64</div>
                <div class="bg-orange-500 w-10 mr-2 h-80">h-80</div>
            </section>
        </section>

        <section class="m-3 p-5 border-2 border-black-500">
            <h1 class="text-lg text-red-500 font-bold">最小高度</h1>
            <div class="h-48 bg-red-200">
                <div class="h-24 bg-red-600 min-h-full">
                    Tailwind is awesome
                </div>
            </div>
        </section>

        <section class="m-3 p-5 border-2 border-black-500">
            <h1 class="text-lg text-red-500 font-bold">最大高度</h1>
            <div class="h-24 bg-orange-200">
                <div class="h-48 bg-orange-500 max-h-full">
                    Tailwind is awesome
                </div>
            </div>
        </section>

        <section class="m-3 p-5 border-2 border-black-500">
            <h1 class="text-lg text-red-500 font-bold">全屏高度</h1>
            <div class="h-screen bg-blue-300">100VH</div>
        </section>
    </body>
</html>
